<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入vue  -->
    <script type="application/javascript" src="../js/vue.js"></script>
    <!--  引入elementUI  -->
    <script type="application/javascript" src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">

    <script type="application/javascript" src="../js/axios.min.js"></script>

</head>
<body>
<div id="app" >
    <el-table
            :data="tableData"
            border
            style="width: 100%">

        <el-table-column
                prop="id"
                label="姓名"
                width="180">
        </el-table-column>

        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>

        <el-table-column
                prop="age"
                label="年龄"
                width="200">
        </el-table-column>

        <el-table-column
                prop="sex"
                label="性别"
                width="200">
        </el-table-column>

        <el-table-column

                label="操作"
                width="400">

            <template slot-scope="scope">

                <el-button type="primary" @click="update(scope.row)" round>编辑</el-button>
                <el-button type="success" round>删除</el-button>

            </template>
        </el-table-column>

    </el-table>
</div>
<script>
    let app = new Vue({
        el:"#app",
        data(){
            return{
                tableData: []
            }
        },
        methods:{
            fun01(){
                axios.get("http://localhost:8080/test?m=test01").then(res =>{
                    console.log(data)
                    this.tableData = res.data
                })
            },
            update(row){
                console.log("当前行的数据为: ==> ",row)
                alert("调用修改方法")
            },
            del(){
                alert("调用删除方法")
            }
        },
    })
</script>
</body>
</html>